<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>填充颜色</title>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script>
  var ctx = document.getElementById('canvas1').getContext('2d');
  var text = ctx.measureText("Hello world"); // TextMetrics object
  // 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
  ctx.font = "48px serif";

  // 文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
  ctx.textAlign = 'start';

  // 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
  ctx.textBaseline = "hanging";
  // 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
  ctx.direction = 'rtl';

  console.log(text)
  ctx.fillText("Hello world", 10, 50);
  ctx.strokeText("Hello world", 10, 50);
</script>
</body>
</html>